<template>
  <div class="article">
    <div class="wrapper-content">
      <h3>矩形</h3>
      <div class="article-content" ref="oneRef">
        <canvas id="one"></canvas>
      </div>
      <h3>使用 fabric.Rect() 方法创建矩形。参数是一个描述矩形的对象。</h3>
      <div class="article-content">
        <div id="box"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { fabric } from 'fabric'; // 引入 fabric

import * as THREE from 'three';
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";



const handfbx = new URL('./hand.fbx', import.meta.url).href;
let renderer = null;
const sceneWidth = 1200;
const sceneHeight = 500;
let camera :any, scene:any;

function init() {
    var container = document.getElementById("box");

    camera = new THREE.PerspectiveCamera( 45, sceneWidth / sceneHeight, 1, 4000 );
    //camera.position.set(900, 400, 900);
    camera.position.set(300, 600, -1400);
    scene = new THREE.Scene();
    //scene.rotation.set(0,Math.PI,0);
    scene.rotation.y = 0.5;

    scene.background = new THREE.Color('#394855');
    scene.fog = new THREE.Fog('#394855', 2000, 2500 );

    var hemiLight = new THREE.HemisphereLight( 0xFFFFFF, 0x444444);
    hemiLight.position.set( 0, 500, -300 );
    scene.add( hemiLight );

    var dirLight = new THREE.DirectionalLight('#FFFFFF');
    dirLight.position.set( 100, 300, 200 );
    dirLight.castShadow = true;
    dirLight.shadow.camera.top = 1000;
    dirLight.shadow.camera.bottom = - 1000;
    dirLight.shadow.camera.left = - 1000;
    dirLight.shadow.camera.right = 1000;
    dirLight.shadow.camera.far=1000;
    dirLight.shadow.mapSize.width = 1024;
    dirLight.shadow.mapSize.height = 1024;
    scene.add( dirLight );

    //scene.add(new THREE.CameraHelper( dirLight.shadow.camera ) );

    //地板
    //var textureLoader=new THREE.TextureLoader();
    //var texture = textureLoader.load("../images/ground.png");
    //var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( {map:texture,color: '#2B3745', depthWrite: false } ) );
    var mesh = new THREE.Mesh( new THREE.PlaneGeometry( 8000, 8000 ), new THREE.MeshBasicMaterial( {color: '#394855', depthWrite:false } ) );
    mesh.rotation.set(- Math.PI / 2,0,0);
    mesh.receiveShadow = true;
    scene.add( mesh );

    var grid = new THREE.GridHelper(8000, 200, '#556B80','#556B80');
    grid.material.opacity = 0.2;
    grid.material.transparent = true;
    //grid.rotation.set(0,100,0);
    scene.add(grid);

    var loader = new FBXLoader();
    loader.load(handfbx, function ( object:any ) {
      console.log("object", object)

      //TODO 设置比例位置等
      object.scale.set(1,1,1);
      object.position.set(0,0,0);

      object.traverse( function ( child:any ) {
          console.log("child", child.isMesh)
          if ( child.isMesh ) {
              var material =new THREE.MeshPhongMaterial( {color: '#2F3C46' ,opacity:1,transparent:true})
              var material2 =new THREE.MeshStandardMaterial({color: '#394855' ,opacity:0.8,transparent:true})
              var material1=new THREE.LineBasicMaterial( {
                  color: 0xffffff,
                  linewidth: 1,
                  linecap: 'round',
                  linejoin:  'round'
              } );

              child.material =material;
              child.castShadow = true;
              child.receiveShadow = true;

              if(child.name=="ground") //地板
              {
                  child.material=material2;
              }
              else if(child.name=="wall") //外墙
              {
                  var textureLoader = new THREE.TextureLoader();
                  var alphaMap = textureLoader.load( 'images/alphaMap.png' );
                  var wallMaterial=new THREE.MeshBasicMaterial({
                      color: 0x005E9B,
                      side:THREE.DoubleSide,
                      transparent: true,
                      depthWrite: false,
                      alphaMap: alphaMap,
                  });
                  child.material=wallMaterial;
                  child.receiveShadow = false;
                  child.castShadow = false;
              }
              else if(child.name.indexOf("HF")==0) //民用电
              {
                  child.material.color.set('#00538A');
                  if(child.name.indexOf("HF18")==0 )
                  {
                      var fined=false;
                      for(var i=0;i<selectNodes.length;i++)
                      {
                          if(selectNodes[i].name==child.name)
                          {
                              fined=true;
                              break;
                          }
                      }
                      //if(!fined) selectNodes.push(child);
                  }
              }
              else if(child.name.indexOf("TF")==0) //工业电
              {
                  child.material.color.set('#917000');
                  //var text=createTitle(child.name);
                  //text.position.set(child.position.x,child.position.y+35,child.position.z);
                  //scene.add(text);
              }
              else if(child.name.indexOf("F")==0) //冷凝罐
              {
                  child.material.color.set('#0099FF');
                  //var text=createTitle(child.name);
                  //text.position.set(child.position.x,child.position.y+25,child.position.z);
                  //scene.add(text);
              }
              else if(child.name.indexOf("NO")==0) //氮气
              {
                  child.material.color.set('#FF0000');
                  //var text=createTitle(child.name);
                  //text.position.set(child.position.x,child.position.y+25,child.position.z);
                  //scene.add(text);
              }
              else if(child.name.indexOf("NH")==0) //氨气
              {
                  child.material.color.set('#0000FF');
                  //var text=createTitle(child.name);
                  //text.position.set(child.position.x,child.position.y+25,child.position.z);
                  //scene.add(text);
              }
              else if(child.name.indexOf("YH")==0) //液化气
              {
                  child.material.color.set('#00FF00');
                  //var text=createTitle(child.name);
                  //text.position.set(child.position.x,child.position.y+25,child.position.z);
                  //scene.add(text);
              }

              //console.log(child.name);

          }
      } );
      scene.add( object );
    } );

    renderer = new THREE.WebGLRenderer( { antialias: true,alpha:true } );
    //renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( sceneWidth, sceneHeight );
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    container.appendChild( renderer.domElement );

    var controls = new OrbitControls(camera, renderer.domElement);
    controls.target.set( 0, 0, 0 );
    controls.update();

}








console.log(1111, THREE)

const one:any = ref(null);
const oneRef:any = ref(null);

const initOne = () => {
  one.value = new fabric.Canvas('one', {
    width: oneRef.value?.clientWidth,
    height: oneRef.value?.clientHeight
  });

  // 创建矩形元素
  const rect = new fabric.Rect({
    top: 100,
    left: 100,
    width: 180,
    height: 180,
    fill: '#aa96da'
  });

  // 将元素添加到画布中
  one.value.add(rect);

  selectAll(one.value);
  disSelectAll(one.value);
}

// 全选
const selectAll = (canvas: any) => {
  canvas.discardActiveObject();
  var sel = new fabric.ActiveSelection(canvas.getObjects(), {
    canvas: canvas,
  });
  canvas.setActiveObject(sel);
  canvas.requestRenderAll();
}

// 取消全选
const disSelectAll = (canvas: any) => {
  canvas.discardActiveObject();
  canvas.requestRenderAll();
}

nextTick(()=>{
  initOne();
  init();
})
</script>

<style lang="scss" scoped>
#coder{
  margin-top: 10px;
  width: 100%;
}
.article {
  h3{
    font-size: var(--rem-15);
    padding: var(--rem-20) var(--rem-20) 0;
    font-weight: 600;
  }
  .article-content{
    min-height: var(--rem-500);
    background: #C44D58;
    background-color: #212121;
    margin: var(--rem-20);
    color: azure;
    #one{
      width: 100%;
      height: var(--rem-500);
    }
    #box{
      width: 100%;
      height: var(--rem-500);
    }
  }
}

</style>
